  <gm:page title="GMashTube" authenticate="false">
  
  <style>
    .gm:section {
      padding: 0px;
      margin: 0px;
    }
    .gm-section-container {
      padding: 0px;
      margin: 0px;
    }
    table.gray-theme .gm-item-selected, div.gray-theme .gm-item-selected {
      background-color: #286ea0;
      color: #FFFFFF;
    }
    .gm-pager-button {
      color: #3399FF;
    }
    #largeThumb .gm-image-container img {
      border: solid gray 1px;
    }
    #signInText {
      font-weight: bold;
      text-align: center;
    }
    #videosList img {
      border: solid black 1px;
    }
  </style>
    
 
  <div style="width:100%;" align="center">
    <table style="width:800px; border: 3px sold #286ea0">
      <tr>
        <td valign="top">
          <gm:container id="myContainer">
           <gm:section id="section3" title="Media" style="background:#FFFFFF; border:solid #286ea0 5px">
            <div style="color: #286EA0; border-bottom:solid black 2px; font-size:16pt; font-weight:bold; margin-bottom:5px; margin-top:10px; padding-bottom:1px; text-align: center;">
                GMashTube - Search &amp; Watch videos from Youtube
            </div>
            
            <table style="width:100%; border: 2px solid #286ea0; padding: 5px; height:400px">
              <tr>
                  <td colspan="2" align="center" style="padding:5px; border: 2px solid #CCCCCC; height:30px;">  
                  xxx <form name="tagForm" onSubmit="return getVideosByTag();">
                   <input name="tag" type="hidden" value="Reel Art Show"
             onfocus="if(this.value=='Type keyword here...')this.value='';"
onblur="if(this.value=='')this.value='Type keyword here...';"
style="width:250px"
                     size=20/>
                   <input type="button" value="search videos" 
                     style="background: #286ea0; color: #FFFFFF; font-size: 12px; font-weight: bold"
                     onClick="getVideosByTag();"/>
                    </form>
                 </td>
               </tr> 
              <tr>
                <td style="padding: 5px; width:270px; background:#FFF;" valign="top">
                        <gm:list id="videosList" 
                          data="http://gdata.youtube.com/feeds/standardfeeds/top_rated?time=today" 
                          pagesize="6"
                          template="videosListTemplate"/>
                </td>
                <td style="padding: 5px; background:#FFFFFF;" valign="middle">
                  <gm:item template="videoDetailTemplate">
                    <gm:handleEvent event="select" src="videosList"/>
                  </gm:item>
                </td>
                </tr>
              </table>
            </gm:section>
          </gm:container>
        </td>
      </tr>
      
       
   </table>
  </div>
  
  <gm:template id="videosListTemplate">
    <table class="gray-theme">
      <tr repeat="true">
        <td valign="top">
            <gm:image ref="media:group/media:thumbnail[@width='130']/@url" width="54" height="41" style="float:left; margin-right:5px"/>
            <gm:html ref="atom:title"/>
            
        </td>
      </tr>
      <tfoot>
        <tr>
          <td><gm:pager/></td>
        </tr>
      </tfoot>
    </table>
  </gm:template>
  
 
 
      <gm:template id="videoDetailTemplate">
        <div style="width:100%" align="center">
        <gm:video ref="media:group/media:content[@type='application/x-shockwave-flash']/@url"/>
        </div>
      </gm:template>
  
  <script>  
    function getVideosByTag(){  
      var tag = document.tagForm.tag.value;
    
    tag="Reel Art Show";
    
      if(tag!=null && tag!=""){
        tag = tag.replace(/ /g,'%2B');
    tag="Reel Art Show";
        var vidModule = google.mashups.getObjectById('videosList');    
        var url = 'http://gdata.youtube.com/feeds/videos?vq=%22'+tag.toString()+'%22';
        vidModule.setData(url);
      }
      else {
        alert('Enter a search string');
      }
      return false;
    }
    function init(){
      
    }
  </script>
  
    <script src="http://www.google-analytics.com/urchin.js" type="text/javascript">
</script>
<script type="text/javascript">
_uacct = "UA-589655-8";
urchinTracker();
</script>  
  

</gm:page>